<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-04-28 15:10:57
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-08-30 19:16:46
 * @Description: 首页
 * @FilePath: \parking-mini\src\pages\index.vue
-->
<template>
    <div class="container">
        <div class="header">
            <div class="search" @click="link('/pages/search', { latitude: position.latitude, longitude: position.longitude })">
                <img :src="imgs.search" alt="" />
                <span>搜索停车场</span>
            </div>
            <button class="scan" @tap="getScancode">
                <img :src="imgs.scan" alt="" />
            </button>
        </div>
        <div class="map">
            <map id="map" v-if="position.latitude && position.longitude" show-location :longitude="position.longitude" :latitude="position.latitude" :markers="position.markers" class="map-content" name="">
                <cover-image class="reset-location" :src="imgs.reset_location" @click="resetLocation"></cover-image>
            </map>
        </div>
        <div class="list" :style="{ paddingBottom: adSmallVisible ? '160rpx' : '0' }">
            <div class="item" v-for="(item, index) in list" :key="index" @click="setLocation(item)">
                <div class="item-left">
                    <div class="item-name ellipsis">{{ item.name }}</div>

                    <div class="item-info">
                        <div class="item-free" :style="{ color: getColor(item.freeNumberType) }">空余车位：{{ item.freeNumber }}</div>
                        <span v-if="item.chargeRule">|</span>
                        <div v-if="item.chargeRule" class="item-rule" :class="{ ellipsis: item.chargeRule.length > 8 }">{{ item.chargeRule }}</div>
                        <div v-if="item.chargeRule && item.chargeRule.length > 6" class="item-rule-detail" @click.stop="showDetail(item)">详情</div>
                    </div>
                </div>
                <div class="item-right">
                    <img class="item-icon" :src="imgs.distance" @click.stop="openMap(item)" />
                    <div class="item-distance">{{ item.distance || "-" }}Km</div>
                </div>
            </div>
        </div>

        <!-- 获取手机号弹窗 -->
        <GetPhoneModal :visible="phoneVisible" @close="phoneVisible = false" @success="phoneVisible = false"></GetPhoneModal>

        <!-- 大窗广告 -->
        <u-popup :show="adVisible" mode="center" :round="10">
            <div class="ad-container">
                <u-swiper height="600rpx" keyName="coverFilePath" :list="adList" @click="selectAd"></u-swiper>
                <img class="ad-close" :src="imgs.close_white" @click="adVisible = false" />
            </div>
        </u-popup>

        <!-- 小窗广告 -->
        <div v-if="adSmallVisible" class="ad-small-container">
            <div class="ad-small-content">
                <u-swiper height="110rpx" keyName="coverFilePath" :list="adSmallList" @click="selectAdSmall"></u-swiper>
            </div>
            <img class="ad-small-close" :src="imgs.close_gray" @click="adSmallVisible = false" />
        </div>

        <!-- 停车场详情 -->
        <u-popup :show="detailVisible" mode="center" :round="10" @close="detailVisible = false">
            <div class="detail-content">{{ detailContent }}</div>
        </u-popup>
    </div>
</template>
<script>
import { getParkListAPI, getAdListAPI } from "../api/api";
import GetPhoneModal from "../components/GetPhoneModal.vue";

const app = getApp();
export default {
    components: { GetPhoneModal },
    data() {
        return {
            imgs: app.globalData.imgs,
            phoneVisible: false,
            detailVisible: false,
            detailContent: "",
            list: [],

            orginginPosition: {},
            position: {
                markers: [],
            },
            mapContext: null,

            adVisible: false,
            adSmallVisible: false,
            adList: [],
            adSmallList: [],
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        this.init();
    },
    methods: {
        resetLocation() {
            this.position.longitude = this.orginginPosition.longitude;
            this.position.latitude = this.orginginPosition.latitude;
            this.$forceUpdate();
        },
        init() {
            wx.showLoading({
                title: "位置获取中",
            });
            wx.getLocation({
                type: "gcj02",
                complete: (res) => {
                    console.log(res);
                    let { latitude, longitude } = res;
                    this.orginginPosition.latitude = latitude;
                    this.orginginPosition.longitude = longitude;
                    this.position.latitude = latitude;
                    this.position.longitude = longitude;

                    wx.showLoading({
                        title: "停车场查询中",
                    });
                    this.getParkList({ latitude, longitude });
                },
            });
        },
        onPullDownRefresh() {
            this.init();
            uni.stopPullDownRefresh();
        },
        getColor(i) {
            return ["#08AA26", "#FFC600", "#FF0000"][i - 1];
        },
        // 初始化广告
        initAd() {
            // 查询广告列表
            getAdListAPI().then((res) => {
                res.forEach((item) => {
                    if (item.address === 1) {
                        this.adList.push(item);
                    } else {
                        this.adSmallList.push(item);
                    }
                });

                if (this.adList.length) this.adVisible = true;
                if (this.adSmallList.length) this.adSmallVisible = true;
            });
        },
        // 展示停车场详情
        showDetail(item) {
            this.detailContent = item.$orig.chargeRule;
            this.detailVisible = true;
        },
        selectAd(index) {
            let item = this.adList[index];
            let id = item.id;
            console.log(item);
            if (item.type === 1) {
                this.link("/pages/adDetail", { id });
            } else {
                wx.navigateToMiniProgram({
                    shortLink: item.content,
                });
            }
        },
        selectAdSmall(index) {
            let item = this.adSmallList[index];
            let id = item.id;
            console.log(item);
            if (item.type === 1) {
                this.link("/pages/adDetail", { id });
            } else {
                wx.navigateToMiniProgram({
                    shortLink: item.content,
                });
            }
        },
        link(url, params) {
            uni.$u.route(url, params);
        },
        // 点击定位到指定停车场
        setLocation(item) {
            this.position.longitude = item.longitude;
            this.position.latitude = item.latitude;
            this.$forceUpdate();
        },
        // 打开地图
        openMap(e) {
            let item = e.$orig;
            wx.openLocation({
                type: "gcj02",
                latitude: item.latitude, // 纬度，浮点数，范围为90 ~ -90
                longitude: item.longitude, // 经度，浮点数，范围为180 ~ -180。
                name: item.name, // 位置名
                address: item.address, // 地址
            });
        },
        // 查询停车场
        getParkList(data) {
            getParkListAPI(data).then((res) => {
                this.list = res;

                this.position.latitude = this.position.latitude || this.list[0].latitude;
                this.position.longitude = this.position.longitude || this.list[0].longitude;

                // 添加停车场marker
                this.list.forEach((item) => {
                    this.position.markers.push({
                        id: item.latitude,
                        iconPath: this.imgs.marker,
                        latitude: item.latitude,
                        longitude: item.longitude,
                        width: 30,
                        height: 30,
                    });
                });

                console.log("用户位置", this.position);
                // 获取地图上下文
                setTimeout(() => {
                    this.mapContext = wx.createMapContext("map", this);
                }, 0);

                wx.hideLoading();
                this.initAd();
            });
        },
        getQueryString(url, key) {
            let urlArr = url.split("?");
            if (!urlArr[1]) return "";
            var theRequest = {};
            var strs = urlArr[1].split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
            return theRequest[key] == null ? "" : theRequest[key];
        },
        getScancode() {
            wx.scanCode({
                success: (res) => {
                    console.log("识别结果", res);
                    if (res.scanType === "QR_CODE") {
                        let url = res.result;
                        // 静态码
                        if (url === "https://www.jfparking.com/os") {
                            uni.$u.route("/pages/order_search");
                        }
                        // 动态码
                        else if (url.startsWith("https://www.jfparking.com")) {
                            let d = this.getQueryString(url, "d");
                            let i = this.getQueryString(url, "i");
                            let k = this.getQueryString(url, "k");
                            let g = this.getQueryString(url, "g");
                            if (i && k && g) {
                                uni.$u.route("/pages/order_detail", {
                                    d,
                                    i,
                                    k,
                                    g,
                                });
                            } else {
                                wx.showToast({
                                    title: "未查询到订单",
                                    icon: "none",
                                });
                            }
                        }
                        // 异常情况
                        else {
                            wx.showToast({
                                title: "未查询到订单",
                                icon: "none",
                            });
                        }
                    }
                },
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
</style>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    .ad-container {
        position: relative;
        width: 450rpx;
        height: 600rpx;
        padding: 30rpx;
        border-radius: 30rpx;
        background-color: #fff;
        .ad-close {
            position: absolute;
            bottom: -100rpx;
            left: 225rpx;
            width: 70rpx;
            height: 70rpx;
        }
    }
    .ad-small-container {
        position: fixed;
        bottom: 20rpx;
        right: 45rpx;
        .ad-small-content {
            margin-bottom: 10rpx;
            width: 160rpx;
            height: 140rpx;
            box-sizing: border-box;
            padding: 15rpx;
            border-radius: 8rpx;
            background-color: #fff;
            box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.2);
        }
        .ad-small-close {
            position: absolute;
            top: -35rpx;
            right: -35rpx;
            width: 40rpx;
            height: 40rpx;
        }
    }
    .detail-content {
        width: 500rpx;
        min-height: 200rpx;
        box-sizing: border-box;
        padding: 30rpx;
        font-size: 24rpx;
        line-height: 36rpx;
    }
    .header {
        flex: none;
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        margin-top: 24rpx;
        margin-bottom: 32rpx;
        display: flex;
        align-items: center;
        .search {
            flex: auto;
            height: 64rpx;
            background-color: #f8f8f8;
            border-radius: 32rpx;
            margin-right: 20rpx;
            font-size: 26rpx;
            line-height: 1;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 25rpx;
                height: 25rpx;
                margin-right: 10rpx;
            }
        }
        .scan {
            height: 64rpx;
            width: 64rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background-color: #fff;
            &::after {
                border: none;
            }
            img {
                width: 44rpx;
                height: 40rpx;
            }
        }
    }
    .map {
        width: calc(100% - 64rpx);
        height: 382rpx;
        border-radius: 24rpx;
        background-color: #ccc;
        margin-bottom: 32rpx;
        flex: none;
        overflow: hidden;
        position: relative;
        .map-content {
            width: 100%;
            height: 100%;
        }
        .reset-location {
            position: absolute;
            width: 80rpx;
            height: 80rpx;
            right: 10rpx;
            bottom: 30rpx;
        }
    }
    .list {
        flex: auto;
        width: 100%;
        overflow: auto;
        .item {
            width: calc(100% - 64rpx);
            height: 144rpx;
            background-color: #f8f8f8;
            border-radius: 24rpx;
            margin: 0 32rpx;
            margin-bottom: 32rpx;
            display: flex;
            align-items: center;
            .item-left {
                flex: auto;
                padding-left: 30rpx;
                .item-name {
                    width: 500rpx;
                    color: #262626;
                    font-weight: bold;
                    font-size: 36rpx;
                    line-height: 1;
                    margin-bottom: 24rpx;
                }
                .item-info {
                    color: #4d4d4d;
                    font-size: 24rpx;
                    line-height: 1;
                    display: flex;
                    color: #08aa26;
                    align-items: center;
                    span {
                        margin: 0 10rpx;
                        color: #333;
                    }
                    .item-free {
                        flex: none;
                    }
                    .item-rule {
                        width: 200rpx;
                        flex: auto;
                        color: #666;
                        margin-right: 10rpx;
                    }
                    .item-rule-detail {
                        flex: none;
                        color: #009cff;
                    }
                }
            }
            .item-right {
                flex: none;
                width: 120rpx;
                padding-right: 18rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-left: 10rpx;
                .item-icon {
                    width: 42rpx;
                    height: 42rpx;
                    margin-bottom: 10rpx;
                }
                .item-distance {
                    color: #333333;
                    font-size: 24rpx;
                    line-height: 1;
                    text-align: center;
                }
            }
        }
    }
}
</style>
